<template>
  <div>
    <a-modal :title="formTitle" width="40%" :visible="isVisible"  @cancel="()=>{isVisible=false;isTinymce=false}" @ok="handleSubmit">
      <div class="helpinstructions">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :maskClosable="false"
        :rules="rules"
        layout="horizontal"
        class="newEditStyle"
        id="mustshowoption"
      >
        <!-- 公告类型 -->
        <a-form-model-item :label="$t('announceType')" prop="type">
            <a-radio-group v-model="form.type"  @change="onChangeType">
                <a-radio :value="1">
                  普通公告
                </a-radio>
                <a-radio :value="2">
                  版本升级
                </a-radio>
                <a-radio :value="3">
                升级维护
                </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <!-- 公告名称 -->
        <a-row :gutter="36">
          <a-col :md="24" :sm="24">
            <a-form-model-item :label="$t('announceName')" prop="name">
              <a-input  v-model="form.name"  />
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 公告内容 -->
        <a-row :gutter="36" style="margin-bottom:15px">
          <a-col :md="24" :sm="24">
            <a-form-model-item  :label="$t('announceContent')" prop="content">
               <RichTextEditor v-if="isTinymce" :height="200" placeholder="请输入公告内容, 可根据需求调整内容格式 ..." v-model="form.content" :max="500"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 推送渠道-->
        <a-row :gutter="36" v-if="form.type==1" style="margin-bottom:10px">
          <a-col :md="24" :sm="24">
            <a-form-model-item :label="$t('pushChannel')" prop="pushChannel">
              <a-checkbox-group v-model="form.pushChannel"  @change="onChange">
                <a-row class="pushChanel">
                  <a-col :md="8" :sm="8">
                    <a-checkbox value="1">
                      弹窗
                    </a-checkbox>
                  </a-col>
                  <a-col :md="12" :sm="8">
                    <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                    {{popupStrategy}} <a-icon type="down" />
                    </a>
                      <a-menu slot="overlay" @click="handleMenuClick">
                        <a-menu-item key="仅每日首次登录出现一次">
                          <a href="javascript:;">仅每日首次登录出现一次</a>
                        </a-menu-item>
                        <a-menu-item key="每次登录出现一次">
                          <a href="javascript:;">每次登录出现一次</a>
                        </a-menu-item>
                        <a-menu-item key="只出现一次">
                          <a href="javascript:;">只出现一次</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a-col>
                  <a-col :md="4" :sm="8">
                    <a-button style="float:right" size="small" type="primary" ghost @click="()=>visibleDetail=true" >
                      <img  src="@assets/preview.png" alt="">
                      预览</a-button>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :md="20" :sm="8">
                  <a-checkbox value="2">
                    站内信
                  </a-checkbox>
                  </a-col>
                    <a-col :md="4" :sm="8">
                  <a-button style="float:right" size="small" type="primary" ghost @click="()=>visibleDetail=true">
                    <img  src="@assets/preview.png" alt="">
                    预览</a-button>
                    </a-col>
                </a-row>
                <a-row>
                  <a-checkbox value="3">
                  企业微信
                  </a-checkbox>
                </a-row>
                <a-row>
                  <a-checkbox value="4">
                  邮箱
                  </a-checkbox>
                </a-row>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item prop="publishTime"  :label="$t('scheduledRelease')" v-if="form.type==1||form.type==2">
          <a-date-picker
            style="width:100%"  
            v-model="form.publishTime"
            :valueFormat="dateFormat" 
            :disabledDate="disabledEndDate"
            :disabledTime="disabledEndDateTime"
            show-time 
            placeholder="请选择发布时间"
            @change="onChangeDate"
            />
        </a-form-model-item>
        <a-form-model-item :label="$t('effectiveTime')" prop="selectedTime"  v-else>    
          <a-range-picker
            :allowClear="false"
            style="width:100%"
            :show-time="{
              format: 'HH:mm:ss',
              defaultValue: [
                moment().add(5, 'minutes'),
                moment('23:59:59', 'HH:mm:ss'),
              ]
            }"
            v-model="form.selectedTime"
            :valueFormat="dateFormat"
            @change="selectDateRange"
            :disabled-date="disabledDate"
             :disabledTime="disabledEndTime"
            :getCalendarContainer="showtoBody"
          />
            <!-- :defaultValue="[form.startTime, form.endTime]" -->
        </a-form-model-item>
              <span class="userTitle">{{$t('user')}}：</span>
              <div class="userBox">
                <span class="mr8 tag" v-for="(item, index) in selectedUserData" :key="item.index">
                  <a>{{item.name}}</a>
                  <a-icon type="close-circle" theme="filled" @click="handleRemove(item.id, index)"/>
                </span>
                <a-button  @click="handleUserChange('user')" size="small">
                  <img  src="@assets/tongxun.png" alt="">
                  选择用户</a-button>
              </div>
              <span class="roleTitle">{{$t('role')}}：：</span>
              <div class="roleBox">
                <span class="mr8 tag" v-for="(item, index) in selectedRoleData" :key="item.index">
                  <a>{{item.name}}</a>
                  <a-icon type="close-circle" theme="filled" @click="handleRoleRemove(item.id, index)"/>
                </span>
                <a-button  @click="handleRoleChange('role')" size="small">
                  <img  src="@assets/roleSelect.png" alt="">
                  选择角色</a-button>
              </div>
        <!--弹窗预览 -->
          <!-- 公告详情 -->
        <a-modal
          :width="450"
          :visible="visibleDetail"
          :title="form.name"
          @cancel="()=>visibleDetail=false"
          :footer="null"
        >
          <div class="ql-container">
            <div class="ql-editor">
                <div v-if="!!form.content" v-html="form.content"></div>
                <div v-else>'暂无数据'</div>
            </div>
          </div>
        </a-modal>
      </a-form-model>
    </div>
    </a-modal>
      <!-- 候选用户弹窗 -->
    <a-modal
      title="选择用户"
      :visible="userOpen"
      width="60%"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
      >
      <a-form-model>
        <a-row :gutter="20">
          <!--用户数据-->
          <a-col :md="8" :sm="24">
            <div class="leftData" >
              <a-input-search v-model="searchValue" :placeholder="$t('pleaseInput')+$t('nameOrJobNumber')" enter-button @search="onUserSearch" />
              <div class="userInfo">
                <div class="singleUserInfo"  v-for="(item, index) in filterUserData"
                  :key="item.id" @click="addSelectedUser(item.id,index)">
                  <span>{{ item.name }}({{item.account}})</span> 
                   <img  src="@assets/toClick.png" alt="">
                </div>
              </div>
            </div>
          </a-col>
          <!-- 已选中的数据 -->
          <a-col :md="16" :sm="24">
            <div class="rightData">
              <p class="selectedData">已选:</p>
                <span class="mr8 tag" v-for="(item, index) in selectedUserData" :key="item.index">
                <a>{{item.name}}</a>
                <a-icon type="close-circle" theme="filled" @click="handleRemove(item.id, index)"/>
              </span>
            </div>
          </a-col>
        </a-row>
      </a-form-model>          
    </a-modal>
      <!-- 候选角色弹窗 -->
    <a-modal
      title="选择角色"
      :visible="roleOpen"
      width="60%"
      @ok="handleRoleOk"
      @cancel="handleRoleCancel"
      :maskClosable="false"
      >
      <a-form-model>
        <a-row :gutter="20">
          <!--角色数据-->
          <a-col :md="8" :sm="24">
            <div class="leftData" >
              <a-input-search v-model="searchRoleValue" placeholder="请输入角色名称" enter-button @search="onRoleSearch" />
              <div class="userInfo">
                <!-- filterRoleData -->
                <div class="singleUserInfo"  v-for="(item,index) in filterRoleData"
                  :key="item.id"  @click="addSelectedRole(item.id,index)">
                  <span>{{ item.name }}</span>
                  <img  src="@assets/toClick.png" alt="">
                </div>
              </div>
            </div>
          </a-col>
          <!-- 已选中的数据 -->
          <a-col :md="16" :sm="24">
            <div class="rightData">
              <p class="selectedData">已选:</p>
                <span class="mr8 tag" v-for="(item, index) in selectedRoleData" :key="item.index">
                <a>{{item.name}}</a>
                <a-icon type="close-circle" theme="filled" @click="handleRoleRemove(item.id, index)"/>
              </span>
            </div>
          </a-col>
        </a-row>
      </a-form-model>          
    </a-modal>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import RichTextEditor from '@comp/RichTextEditor'
import { STable } from '@/components'
import sysAnnounceApi from '@/api/modules/system/announce'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
// import AddUserOrRole from './AddUserOrRole.vue'
import { SelectedUserTbColumns } from '../config/list'
import { mapState } from 'vuex'
import { ecuInitFormData } from '../config/form'
import moment from 'moment'
export default {
  name: 'NewEditEcu',
  components: { 
    RichTextEditor,
    TableEllipsis, 
     STable,
    // AddUserOrRole
  },
  props: {
    userData: {
      type: Array,
      default: () => {
        return []
      }
    },
    roleData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  created(){
    
  },
  computed: {
  },
  data() {
    const timeValidator = (rule, value, callback) => {
      if ( this.form.selectedTime==undefined) {
        callback(new Error( this.$t('pleaseSelect') ))
      } else {
        callback()
      }
    }
    return {
      formTitle:'',
      isTinymce:false,
      searchValue:undefined,
      searchRoleValue:undefined,
      filterUserData:[],
      filterRoleData:[],
      isVisible:false,
      selectedUserData:[],
      selectedRoleData:[],
      initSelectedUserData:[],
      initFilterUserData:[],
      initUserIds:[],
      initSelectedRoleData:[],
      initFilterRoleData:[],
      initRoleIds:[],
      popupStrategy:'仅每日首次登录出现一次',
      visibleDetail:false,
      columns: SelectedUserTbColumns,
      userOpen:false,
      roleOpen:false,
      moment,
      dateFormat: 'YYYY-MM-DD HH:mm:ss',
      form: {
        // ...ecuInitFormData
        publishTime:null,
        startTime:null,
        endTime:null,
      },
      formDataCopy:{},//编辑前数据
      rules: {
        type: [
          { required: true, message: this.$t('pleaseSelect')}
        ],
        name: [
          { required: true,message: this.$t('pleaseInput')},
          {
            max:15,
            message: this.$t('texLenTip').replace('__NUM__', 15)
          }
          
        ],
        content: [
          { required: true, message: this.$t('pleaseInput') },
          {
            max:500,
            message: this.$t('texLenTip').replace('__NUM__', 500)
          }
        ],
        pushChannel: [
          { required: true, message: this.$t('pleaseSelect') },
        ],
        selectedTime:[
          { required: true, validator: timeValidator},
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    // 新建或者编辑
    show(recordData) {
      const vm = this
      vm.isTinymce=true
      vm.$refs.ruleForm && vm.$refs.ruleForm.resetFields()
      vm.isVisible=true
      if (recordData.id) {
        vm.formTitle='编辑公告通知',
        //   编辑
        sysAnnounceApi.getAnnounceDataById({id:recordData.id}).then((res) => {
          vm.form = res.data;
          vm.selectedUserData=[]
          vm.selectedRoleData=[]
          if(vm.form.type==1||vm.form.type==2){
            if(!!vm.form.publishTime){
              vm.form.publishTime=moment(vm.form.publishTime).format("YYYY-MM-DD HH:mm:ss");
            }
          }else{
            vm.form.selectedTime = [vm.form.startTime, vm.form.endTime]
          }
          if( vm.form.userIds&&vm.form.userIds.length>0){
            vm.userData.forEach((item) => {
              vm.form.userIds.forEach(item2 => {
                if (item2 === item.id) {
                    vm.selectedUserData.push(item)
                }})
            })
            vm.filterUserData=vm.userData.filter(item=>{return !vm.form.userIds.includes(item.id)}  )   
          }
          if( vm.form.roleIds&&vm.form.roleIds.length>0){
            vm.roleData.forEach((item) => {
              vm.form.roleIds.forEach(item2 => {
                if (item2 === item.id) {
                    vm.selectedRoleData.push(item)
                }}
              )
            })
            vm.filterRoleData=vm.roleData.filter(item=>{return !vm.form.roleIds.includes(item.id)}  )
          }
        })
      } else {
        //   新增
        vm.formTitle='新建公告通知',
        vm.form = { ...ecuInitFormData }
        vm.form.startTime=null
        vm.form.endTime=null
        vm.form.userIds=[]
        vm.form.roleIds=[]
        vm.selectedUserData=[]
        vm.selectedRoleData=[]
        vm.filterUserData=vm.$commonFun.deepCopy(vm.userData)
        vm.filterRoleData=vm.$commonFun.deepCopy(vm.roleData)
      }
    },
     // 解决选择器被容器遮挡的问题
    showtoBody () {
      return document.querySelector('#mustshowoption') || document.body
    },
    // 搜索用户
    onUserSearch(val){
      this.filterUserData=this.userData.filter(item=>{return (item.name.includes(val)||item.account.includes(val))&&!this.form.userIds.includes(item.id)}  )
    },
    // 搜索角色
    onRoleSearch(val){
      this.filterRoleData=this.roleData.filter(item=>{return item.name.includes(val)&&!this.form.roleIds.includes(item.id)}  )
    },
    addSelectedUser(id,index){
      let a=this.filterUserData.splice(index,1)
      this.selectedUserData=[...this.selectedUserData,...a]
      this.form.userIds.push(id)
    },
    addSelectedRole(id,index){
      let a=this.filterRoleData.splice(index,1)
      this.selectedRoleData=[...this.selectedRoleData,...a]
      this.form.roleIds.push(id)
    },
    handleRemove(id,index){
      this.form.userIds.splice(index,1)
      let a=this.selectedUserData.splice(index,1)
      this.filterUserData=[...this.filterUserData,...a]
    },
    handleRoleRemove(id,index){
      this.form.roleIds.splice(index,1)
      let a=this.selectedRoleData.splice(index,1)
      this.filterRoleData=[...this.filterRoleData,...a]
    },
    handleMenuClick(e){
      this.popupStrategy=e.key
    },
    // 日期变化
    onChangeDate (val1, formatedDate) {
      this.form.publishTime = formatedDate
    },
    // 硬件版本日期的日期选择的禁选日期
    disabledEndDate (current) {
      return current && current < moment().subtract(1, 'days')
    },
     // 超出限制范围不可选择
    disabledDate (current) {
      return current && current < moment().subtract(23, 'hours')
    },
    range(start, end){
      const result = [];
      for (let i = start; i < end; i++) {
          result.push(i);
      }
      return result;
    },
    // 日期范围选择器
    disabledEndTime(date,type){
      let currentDay = moment().date();    //当下的时间
      let currentHours = moment().hours();
      let currentMinutes = moment().minutes()+5; 
      if((type=='start'||type==undefined) && date){
        let settingHours = moment(date[0]).hours();
        let settingDay = moment(date[0]).date();
        if (date[0] && settingDay === currentDay && settingHours === currentHours) {
          return {       
            disabledHours: () => this.range(0, currentHours),         //设置为当天现在这小时，禁用该小时，该分钟之前的时间
            disabledMinutes: () => this.range(0, currentMinutes),
          };
        }else if (date[0] && settingDay === currentDay && settingHours > currentHours) {
            return { 
                disabledHours: () => this.range(0, currentHours),      //设置为当天现在这小时之后，只禁用当天该小时之前的时间 
                disabledMinutes: () => [],
            };   
        }else if (date[0] && settingDay === currentDay && settingHours < currentHours) {
            return {
                disabledHours: () => this.range(0, currentHours),      //若先设置了的小时小于当前的，再设置日期为当天，需要禁用当天现在这小时之前的时间和所有的分
                disabledMinutes: () => this.range(0, 59),
            }
        }else if (date[0] && settingDay > currentDay) {
            return {                                    
                disabledHours: () => [],                     //设置为当天之后的日期，则不应有任何时间分钟的限制
                disabledMinutes: () => [],
            }
        }
      }else if(type=='end' && date){ 
        let settingHours = moment(date[1]).hours();
        let settingDay = moment(date[1]).date();
        if (date[1] && settingDay === currentDay && settingHours === currentHours) {
          return {       
            disabledHours: () => this.range(0, currentHours),         //设置为当天现在这小时，禁用该小时，该分钟之前的时间
            disabledMinutes: () => this.range(0, currentMinutes),
          };
        }else if (date[1] && settingDay === currentDay && settingHours > currentHours) {
            return { 
                disabledHours: () => this.range(0, currentHours),      //设置为当天现在这小时之后，只禁用当天该小时之前的时间
                disabledMinutes: () => [],
            };   
        }else if (date[1] && settingDay === currentDay && settingHours < currentHours) {
            return {
                disabledHours: () => this.range(0, currentHours),      //若先设置了的小时小于当前的，再设置日期为当天，需要禁用当天现在这小时之前的时间和所有的分
                disabledMinutes: () => this.range(0, 59),
            }
        }else if (date[1] && settingDay > currentDay) {
            return {                                    
                disabledHours: () => [],                     //设置为当天之后的日期，则不应有任何时间分钟的限制
                disabledMinutes: () => [],
            }
        }
      }
    },
    disabledEndDateTime(date){
      let currentDay = moment().date();    //当下的时间
      let currentHours = moment().hours();
      let currentMinutes = moment().minutes();  //设置的时间
      let settingHours = moment(date).hours();
      let settingDay = moment(date).date();
      if (date && settingDay === currentDay && settingHours === currentHours) {
          return {       
              disabledHours: () => this.range(0, currentHours),         //设置为当天现在这小时，禁用该小时，该分钟之前的时间
              disabledMinutes: () => this.range(0, currentMinutes),
          };
      }else if (date && settingDay === currentDay && settingHours > currentHours) {
          return { 
              disabledHours: () => this.range(0, currentHours),      //设置为当天现在这小时之后，只禁用当天该小时之前的时间 
          };   
      }else if (date && settingDay === currentDay && settingHours < currentHours) {
          return {
              disabledHours: () => this.range(0, currentHours),      //若先设置了的小时小于当前的，再设置日期为当天，需要禁用当天现在这小时之前的时间和所有的分
              disabledMinutes: () => this.range(0, 59),
          }
      }else if (date && settingDay > currentDay) {
          return {                                    
              disabledHours: () => [],                     //设置为当天之后的日期，则不应有任何时间分钟的限制
              disabledMinutes: () => [],
          }
      }else{
        return {       
          disabledHours: () => this.range(0, currentHours),         //设置为当天现在这小时，禁用该小时，该分钟之前的时间
          disabledMinutes: () => this.range(0, currentMinutes),
        };
      }
    },
    // 提交信息
    handleSubmit(){
      const vm = this
      // console.log(vm.form, 'vm.form')
      vm.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return
        }
        if (vm.selectedUserData.length < 1) {
          vm.$message.warning(vm.$t('pleaseSelect') + vm.$t('user'))
          return
        }
        if (vm.selectedRoleData.length < 1) {
          vm.$message.warning(vm.$t('pleaseSelect') + vm.$t('role'))
          return
        }
        let params={
          content: vm.form.content,
          endTime: vm.form.endTime, 
          name: vm.form.name,
          popupStrategy: vm.popupStrategy,
          pushChannel: vm.form.pushChannel,
          roleIds:vm.form.roleIds,
          publishTime:vm.form.publishTime,
          startTime: vm.form.startTime,
          type: vm.form.type,
          userIds:vm.form.userIds
        }
        if(vm.form.id){
          params.id=vm.form.id
          sysAnnounceApi.editAnnounceData(params).then(() => {
            vm.$message.success(vm.$t('save') + vm.$t('success'))
            vm.isVisible=false       
            vm.isTinymce=false       
            vm.$emit('clickbtn', { type: 'searchData', data: true })
          })
        }else{
           sysAnnounceApi.createAnnounceData(params).then(() => {
            vm.$message.success(vm.$t('save') + vm.$t('success'))
            vm.isVisible=false
            vm.isTinymce=false
            vm.$emit('clickbtn', { type: 'searchData', data: true })
          })
        } 
      })
    },
    handleUserChange(type){
      this.searchValue=undefined
      this.initSelectedUserData=this.$commonFun.deepCopy(this.selectedUserData)
      this.initFilterUserData=this.$commonFun.deepCopy(this.filterUserData)
      this.initUserIds=this.$commonFun.deepCopy(this.form.userIds)
      this.userOpen=true
    },
    handleOk(){
      if(this.selectedUserData.length>0){
        this.userOpen=false
      }else{
        this.$message.warning(this.$t('pleaseSelect') + this.$t('user'))
      }
    },
    handleCancel(){
      this.userOpen=false
      this.form.userIds=this.initUserIds
      this.selectedUserData=this.initSelectedUserData
      this.filterUserData=this.initFilterUserData
    },
    handleRoleChange(type){
      this.searchRoleValue=undefined
      this.initSelectedRoleData=this.$commonFun.deepCopy(this.selectedRoleData)
      this.initFilterRoleData=this.$commonFun.deepCopy(this.filterRoleData)
      this.initRoleIds=this.$commonFun.deepCopy(this.form.roleIds)
      this.roleOpen=true
    },
    handleRoleOk(){
      if(this.selectedRoleData.length>0){
        this.roleOpen=false
      }else{
        this.$message.warning(this.$t('pleaseSelect') + this.$t('role'))
      }
    },
    handleRoleCancel(){
      this.roleOpen=false
      this.form.roleIds=this.initRoleIds
      this.selectedRoleData=this.initSelectedRoleData
      this.filterRoleData=this.initFilterRoleData
    },
    // 选择生效时间范围
    selectDateRange(date, dateString){
      this.form.startTime = dateString[0] ;
      this.form.endTime = dateString[1] ;
    },
   
    // 预览
    preView(){
      
    },
   
    // 修改公告类型
    onChangeType(e) {
      if(e.target.value==1||e.target.value==2){
        this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate('publishTime')
      })
      }
    },
    // 修改发布渠道
    onChange(checkedValues) {
      this.pushChannelList=checkedValues
    },
   
  },
  watch: {
   
  }
}

</script>
<style lang="less" scoped>
.helpinstructions {
    overflow-x: hidden;
    overflow-y: auto;
    height: 700;
}
.ant-form-item {
  // height: 70px;
  margin-bottom: 0;
  /*&:has(.has-error){*/
  /*  margin-bottom: -3px;*/
  /*}*/
}
span{
  font-size: 1.2rem;
  font-weight: bold;
  color: #5e5e5e;
}
::v-deep.ant-checkbox-group {
      display: block;
}
::v-deep .ant-input-search-button {
    border-radius: 4px;
}
.effectiveTime{
  display: flex;
  justify-content: space-between;
}
.userTitle::before{
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 1.4rem;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
.userBox{
  margin-top: 6px;
  margin-bottom: 8px;
}
.roleTitle::before{
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 1.4rem;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
  }
.roleBox{
  margin-top: 6px;
  margin-bottom: 8px;
}
.mr8{
  margin-right:8px;
  white-space: nowrap
}
.tag{
  padding: 5px;
  height: 20px;
  line-height: 30px;
  border: 1px solid #649eb3;
  border-radius:16px ;
  color: #649eb3;
  a{
    display: inline-block;
    height: 20px;
    padding-right:5px ;
    font-weight: lighter;
  }
  i{
    display: inline-block;
    cursor: pointer;
  }
}
.leftData{
  border-right: 1px solid #d9d9d9;
  padding: 15px 15px 0px 0px;
  height: 420px;
  .userInfo{
    margin-top: 8px;
    height: calc(100% - 45px);
    overflow-y: scroll;
    .singleUserInfo{
      display: flex;
      justify-content: space-between;
      background-color:#F9F9F9 ;
      padding: 3px;
      margin-bottom: 4px;
    }
  }

}
.rightData{
  .selectedData{
    font-size: 16px;
    margin-bottom: 10px;
  }
}
</style>
<style lang="less">
.tox-tinymce-aux {
  z-index: 709826033 !important;
}
</style>
